<template>
	<view class="gift-popup">
		<view class="memorial-shop-card">
			<!-- Header Tabs -->
			<view class="shop-header">
				<van-tabs v-model="activeTab" @change="handleTabClick" style="width: calc(100% - 80rpx);">
					<van-tab v-for="items in giftCateList" :key="items.id" :name="items.id" :title="items.name" />
				</van-tabs>
				<van-icon name="cross" class="close-icon" @click="handleClose"/>
			</view>
			
			<view class="shop-content">
				<view class="item-grid-container">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view v-if="activeTabName !== '扫墓'" class="item-grid">
							<van-grid :column-num="3">
								<van-grid-item v-for="giftItem in giftList" :key="giftItem.id"
									@click="handleSelect(giftItem)">
									<view class="shop-item">
										<view class="item-image-placeholder">
											<van-image :src="giftItem.cover" width="100%" height="100%" fit="contain" />
										</view>
										<p class="item-name">{{ giftItem.name }}</p>
										<p class="item-price">
											<text v-if="giftItem.price === 0" class="free">免费</text>
											<text v-else>
												{{ muDetail.type == 1 ? giftItem.price : muDetail.type == 2 ? giftItem.vip_price : giftItem.svip_price }}
												永恒币
											</text>
											<text>{{ giftItem.expire_time }}天</text>
										</p>
									</view>
								</van-grid-item>
							</van-grid>
						</view>
								
						<view v-if="activeTabName === '扫墓'" class="item-grid">
							<van-grid :column-num="1">
								<van-grid-item v-for="(giftItem, index) in giftList" :key="giftItem.id"
									@click="handleSelect(giftItem)">
									<view v-if="index === 0" class="shop-item-saomu">
										<view class="shop-item-left">
											<view class="item-image-placeholder">
												<van-image :src="giftItem.cover" width="100%" height="100%"
													fit="contain" />
											</view>
											<p class="item-name">{{ giftItem.name }}</p>
											<p class="item-price">
												<text v-if="giftItem.price === 0" class="free">免费</text>
												<text v-else>
													{{ muDetail.type == 1 ? giftItem.price : muDetail.type == 2 ? giftItem.vip_price : giftItem.svip_price }}
													永恒币
												</text>
												<text>{{ giftItem.expire_time }}天</text>
											</p>
										</view>
										<view class="shop-item-right">
											<view v-show="props.muDetail.repair_time != 0" class="shop-item-right_title">
												<text>距离上次修缮已第</text>
												<text
													style="color: #f00; margin: 0 5px;">{{ daysPassedSince(props.muDetail.repair_time * 1000) }}</text>
												<text>天</text>
											</view>
											<view v-show="props.muDetail.repair_time != 0"
												class="shop-item-right_lastTime">
												上次修缮：{{ props.muDetail.repair_name }}
												<text>{{ timeFormat(props.muDetail.repair_time * 1000, 'yyyy-mm-dd hh:MM') }}</text>
											</view>
											<view class="shop-item-right_explain">
												修缮说明：对墓地裂痕进行修复、墓碑翻新等...
											</view>
											<view class="shop-item-right_tips">
												普通馆 {{ giftItem.price }} 永恒币、豪华馆 {{ giftItem.vip_price }} 永恒币、尊贵馆
												{{ giftItem.svip_price }} 永恒币
											</view>
										</view>
									</view>
									<view v-if="index === 1" class="shop-item-saomu">
										<view class="shop-item-left">
											<view class="item-image-placeholder">
												<van-image :src="giftItem.cover" width="100%" height="100%"
													fit="contain" />
											</view>
											<p class="item-name">{{ giftItem.name }}</p>
											<p class="item-price">
												<text v-if="giftItem.price === 0" class="free">免费</text>
												<text v-else>
													{{ muDetail.type == 1 ? giftItem.price : muDetail.type == 2 ? giftItem.vip_price : giftItem.svip_price }}
													永恒币
												</text>
												<text>{{ giftItem.expire_time }}天</text>
											</p>
										</view>
										<view class="shop-item-right">
											<view v-show="props.muDetail.repair_time != 0" class="shop-item-right_title">
												<text>距离上次修缮已第</text>
												<text
													style="color: #f00; margin: 0 5px;">{{ daysPassedSince(props.muDetail.repair_time * 1000) }}</text>
												<text>天</text>
											</view>
											<view v-show="props.muDetail.repair_time != 0"
												class="shop-item-right_lastTime">
												上次修缮：{{ props.muDetail.repair_name }}
												<text>{{ timeFormat(props.muDetail.repair_time * 1000, 'yyyy-mm-dd hh:MM') }}</text>
											</view>
											<view class="shop-item-right_explain">
												修缮说明：对墓地裂痕进行修复、墓碑翻新等...
											</view>
											<view class="shop-item-right_tips">
												普通馆 {{ giftItem.price }} 永恒币、豪华馆 {{ giftItem.vip_price }} 永恒币、尊贵馆
												{{ giftItem.svip_price }} 永恒币
											</view>
										</view>
									</view>
								</van-grid-item>
							</van-grid>
						</view>
					</scroll-view>
					
				</view>
			
				<view class="scroll-hint" v-if="giftList.length > 10">
					滑动查看更多
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, shallowRef, watch, nextTick, defineExpose, toRaw } from 'vue';
	import { apiMuGiftList } from '@/api/gift';
	import { daysPassedSince, timeFormat } from '@/utils/util';

	const props = defineProps({
		muDetail: {
			type: Object,
			default: () => ({})
		}
	});

	const emit = defineEmits<{
		(e : 'success', params : object) : void;
		(e : 'close') : void;
	}>();

	const mode = ref('add');
	const activeTab = ref(2);
	const activeTabName = ref('');

	const giftCateList = ref([]);
	const giftList = ref([]);

	const setFormData = (data : Record<any, any>) => {
		giftCateList.value = data.giftCateList;
		giftList.value = data.giftList;
		activeTab.value = data.tabIndex;
		activeTabName.value = data.activeTabName;
	};
	const open = (type : string) => {
		console.log(type)
		mode.value = type
		getpiMuGiftList()
	}
	interface GiftItem {
		create_time: string,
		id: number | string,
		name: string
		pid: number | string
		sort: number | string
		status: number | string
		update_time: string,

		price: number,
		vip_price: number,
		svip_price: number,
		expire_time: number,
		cover: string,
		desc: string,
		cid: number | string,
		is_recommend: number
	}
	const handleSelect = async (giftItem : GiftItem) => {
		if (giftItem.name === '扫墓') {
			if (daysPassedSince(props.muDetail.clear_time * 1000) < 120) {
				return false;
			}
		}

		if (giftItem.name === '修缮') {
			if (daysPassedSince(props.muDetail.repair_time * 1000) < 300) {
				return false;
			}
		}

		emit('success', giftItem);
	};

	const handleClose = () => {
		emit('close');
	};

	const handleTabClick = (name: string | number, title: string) => {
		console.log(name, title)
		activeTab.value = Number(name);
		activeTabName.value = title;
		getpiMuGiftList();
	};

	const getpiMuGiftList = async () => {
		const res = await apiMuGiftList({ cid: activeTab.value }).then(res=>{
			console.log('====================',res)
			if(res.code == 1){
				giftList.value = res.data
			}
		}).catch(error=>{
			console.log(error)
		})
		
	};

	defineExpose({
		open,
		setFormData
	});
</script>

<style scoped lang="scss">
	.gift-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.memorial-shop-card {
		width: 100%;
		/* Adjusted width */
		background-color: #fdfbf6;
		border-radius: 8px;
		padding: 0;
		position: relative; // For absolute positioning of close button
	}

	.shop-header {
		position: relative;
		padding: 40rpx 60rpx 15rpx 15rpx;
		background-color: #f9f6f0;
	}

	.close-icon {
		position: absolute;
		top: 40rpx;
		right: 15rpx;
		transform: translateY(-50%);
		font-size: 40rpx;
	}

	.shop-content {
		padding: 10px 15px 15px 15px;
		// height: auto;
		// min-height: 600rpx;
		// max-height: 800rpx;
	}

	.item-grid-container {
		position: relative;
		// display: flex;
		// height: 100%;
		.item-grid{
			
		}
	}

	.item-name {
		font-size: 14px;
		color: #333;
		margin: 10px 0;
	}

	.item-price {
		font-size: 12px;
		color: #888;
	}

	.scroll-hint {
		text-align: center;
		font-size: 14px;
		color: #999;
		padding: 10px 0;
		background-color: #f9f6f0;
	}




	.shop-item {
		text-align: center;
		background-color: #fff; // White background for items
		border: 1px solid #eee;
		border-radius: 3px;
		padding: 10px 5px 5px 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 185px; // Fixed height for alignment
		box-sizing: border-box;
		.item-image-placeholder {
			width: 120px; // Adjust size as needed
			height: 120px; // Adjust size as needed
			// background-color: #f0f0f0; // Placeholder color
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ccc;
			font-size: 12px;
			// Optionally add a placeholder icon or text:
			// &::after { content: 'Image'; }
		}
		.item-name {
			font-size: 32rpx;
			color: #333;
			margin: 0 0 5px 0;
			white-space: nowrap; // Prevent wrapping
			overflow: hidden;
			text-overflow: ellipsis;
			width: 100%;
		}
		
		.item-price {
			font-size: 12px;
			color: #888;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px; // Space between elements
			line-height: normal; // Reset line height
		
			.free {
				color: #e67e22; // Orange color for 'Free'
				font-weight: bold;
			}
		
			.el-icon {
				font-size: 12px; // Match text size
				position: relative;
				//   top: 1px; // Slight vertical alignment
			}
		}
		
	}
	
	
	.scroll-hint {
		text-align: center;
		font-size: 13px;
		color: #999;
		margin-top: 10px;
		padding: 5px 0;
		background-color: #f9f6f0; // Match header background
		border-top: 1px solid #eee;
		margin: 10px -15px -15px -15px; // Extend to card edges
		border-bottom-left-radius: 4px; // Match card radius
		border-bottom-right-radius: 4px;
	}
	
	
	.shop-item-saomu {
		display: flex;
		flex-direction: row;
		margin-bottom: 15px;
		.item-image-placeholder {
			width: 120px; // Adjust size as needed
			height: 120px; // Adjust size as needed
			// background-color: #f0f0f0; // Placeholder color
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ccc;
			font-size: 12px;
			// Optionally add a placeholder icon or text:
			// &::after { content: 'Image'; }
		}
		.item-name {
			font-size: 32rpx;
			color: #333;
			margin: 0 0 5px 0;
			white-space: nowrap; // Prevent wrapping
			overflow: hidden;
			text-overflow: ellipsis;
			width: 100%;
		}
		
		.item-price {
			font-size: 12px;
			color: #888;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px; // Space between elements
			line-height: normal; // Reset line height
		
			.free {
				color: #e67e22; // Orange color for 'Free'
				font-weight: bold;
			}
		
			.el-icon {
				font-size: 12px; // Match text size
				position: relative;
				//   top: 1px; // Slight vertical alignment
			}
		}
		.shop-item-left {
			width: 120px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.shop-item-right {
			flex-grow: 1;
			padding-left: 20px;
		}
		
		.shop-item-right_title {
			font-size: 14px;
			font-weight: bold;
		}
		
		.shop-item-right_explain,
		.shop-item-right_tips {
			font-size: 12px;
			color: #666;
		}
	}

	
	
	
	
	
</style>